<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH1EX3: Your First Canvas Application </title>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function () { };
Debugger.log = function (message) {
	try {
		console.log(message);
	}
	catch (exception) { return;
	}
}
function eventWindowLoaded () {
	canvasApp();
}

function canvasApp () {
	var CanvasTitle = document.getElementById("Title");
	var CanvasCountry = document.getElementById("Country");
	var CanvasCountry2 = document.getElementById("Country2");
	var CanvasCountry3 = document.getElementById("Country3");
	var CanvasTerrain = document.getElementById("Terrain");
	var CanvasMenuInstructions = document.getElementById("MenuInstructions");

	var CanvasLT = document.getElementById("Lake");
	var CanvasOS = document.getElementById("OS");
	var CanvasUni = document.getElementById("Uni");
	var CanvasSpeedy = document.getElementById("Speedy");

	var CanvasActivity1 = document.getElementById("Activity1");
	var CanvasActivity2 = document.getElementById("Activity2");
	var CanvasActivity3 = document.getElementById("Activity3");
	var CanvasActivity4 = document.getElementById("Activity4");
	var CanvasActivity5 = document.getElementById("Activity5");
	var CanvasActivity6 = document.getElementById("Activity6");
	var CanvasPause = document.getElementById("Pause");
	var CanvasVictory1 = document.getElementById("Victory1");
	var CanvasEnd = document.getElementById("End");
	
	var contextTitle = CanvasTitle.getContext("2d");
	var contextCountry = CanvasCountry.getContext("2d");
	var contextCountry2 = CanvasCountry2.getContext("2d");
	var contextCountry3 = CanvasCountry3.getContext("2d");
	var contextTerrain = CanvasTerrain.getContext("2d");
	var contextMenuInstructions = CanvasMenuInstructions.getContext("2d");

	var contextLT = CanvasLT.getContext("2d");
	var contextOS = CanvasOS.getContext("2d");
	var contextUni = CanvasUni.getContext("2d");
	var contextSpeedy = CanvasSpeedy.getContext("2d");

	var contextActivity1 = CanvasActivity1.getContext("2d");
	var contextActivity2 = CanvasActivity2.getContext("2d");
	var contextActivity3 = CanvasActivity3.getContext("2d");
	var contextActivity4 = CanvasActivity4.getContext("2d");
	var contextActivity5 = CanvasActivity5.getContext("2d");
	var contextActivity6 = CanvasActivity6.getContext("2d");
	var contextPause = CanvasPause.getContext("2d");
	var contextVictory1 = CanvasVictory1.getContext("2d");
	var contextEnd = CanvasEnd.getContext("2d");
	Debugger.log("Drawing Canvas");
	//context.fillStyle = '#0000ff';
	//context.fillRect(0, 0, 640, 480);
	//Drawing part
	//context.fillStyle = "#ffffaa"; context.fillRect(0, 0, 500, 300);
	
	//text
	//context.fillStyle = "#000000";
	//context.font = "20px _sans";
	//context.textBaseline = "top";
	//context.fillText ("Hello World!", 195, 80 );
	
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Title Page
	var TitlebkImage = new Image();
	TitlebkImage.src = "TitleBack.png";
	TitlebkImage.onload = function () {	
		contextTitle.drawImage(TitlebkImage, 0 , 0);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//
	//Countries page 1 
	//
	var CountrybackImage = new Image();
	CountrybackImage.src = "COUNTRYPAGE/Countryback.png";
	CountrybackImage.onload = function () {	
		contextCountry.drawImage(CountrybackImage, 0 , 0);
		}
	//Left part
	var CountryLUI1Image = new Image();
	CountryLUI1Image.src = "COUNTRYPAGE/CountryUI1.png";
	CountryLUI1Image.onload = function () {	
		contextCountry.drawImage(CountryLUI1Image, 25 , 80);
		}
	var CountryLUI2Image = new Image();
	CountryLUI2Image.src = "COUNTRYPAGE/CountryUI2.png";
	CountryLUI2Image.onload = function () {	
		contextCountry.drawImage(CountryLUI2Image, 35 , 105);
		}	
	var CountryLUIbuttonImage = new Image();
	CountryLUIbuttonImage.src = "COUNTRYPAGE/readyNot.png";
	CountryLUIbuttonImage.onload = function () {	
		contextCountry.drawImage(CountryLUIbuttonImage, 85 , 315);
		}
	var Country1LUIscrollmage = new Image();
	Country1LUIscrollmage.src = "COUNTRYPAGE/scroll0.png";
	Country1LUIscrollmage.onload = function () {	
		contextCountry.drawImage(Country1LUIscrollmage, 292 , 125);
		}
	//Left part flags
	var CountryLUIflag1 = new Image();
	CountryLUIflag1.src = "COUNTRYPAGE/Ghana.png";
	CountryLUIflag1.onload = function () {	
		contextCountry.drawImage(CountryLUIflag1, 190 , 120);
		}
	var CountryLUIflag2 = new Image();
	CountryLUIflag2.src = "COUNTRYPAGE/GreatBritain.png";
	CountryLUIflag2.onload = function () {	
		contextCountry.drawImage(CountryLUIflag2, 185 , 220);
		}
	var CountryLUIflag3 = new Image();
	CountryLUIflag3.src = "COUNTRYPAGE/India.png";
	CountryLUIflag3.onload = function () {	
		contextCountry.drawImage(CountryLUIflag3, 65 , 220);
		}	
	var CountryLUIflag4 = new Image();
	CountryLUIflag4.src = "COUNTRYPAGE/Iran.png";
	CountryLUIflag4.onload = function () {	
		contextCountry.drawImage(CountryLUIflag4, 65 , 120);
		}
	//Right part
	var CountryRUI1Image = new Image();
	CountryRUI1Image.src = "COUNTRYPAGE/CountryUI1.png";
	CountryRUI1Image.onload = function () {	
		contextCountry.drawImage(CountryRUI1Image, 330 , 80);
		}	
	var CountryRUI2Image = new Image();
	CountryRUI2Image.src = "COUNTRYPAGE/CountryUI2.png";
	CountryRUI2Image.onload = function () {	
		contextCountry.drawImage(CountryRUI2Image, 340 , 105);
		}
	var CountryRUIbuttonImage = new Image();
	CountryRUIbuttonImage.src = "COUNTRYPAGE/readyNot.png";
	CountryRUIbuttonImage.onload = function () {	
		contextCountry.drawImage(CountryRUIbuttonImage, 390 , 315);
		}
	var Country1RUIscrollmage = new Image();
	Country1RUIscrollmage.src = "COUNTRYPAGE/scroll0.png";
	Country1RUIscrollmage.onload = function () {	
		contextCountry.drawImage(Country1RUIscrollmage, 597 , 125);
		}
	//Right part flags	
	var CountryRUIflag1 = new Image();
	CountryRUIflag1.src = "COUNTRYPAGE/Argentina.png";
	CountryRUIflag1.onload = function () {	
		contextCountry.drawImage(CountryRUIflag1, 490 , 120);
		}
	var CountryRUIflag2 = new Image();
	CountryRUIflag2.src = "COUNTRYPAGE/Canada.png";
	CountryRUIflag2.onload = function () {	
		contextCountry.drawImage(CountryRUIflag2, 485 , 220);
		}
	var CountryRUIflag3 = new Image();
	CountryRUIflag3.src = "COUNTRYPAGE/China.png";
	CountryRUIflag3.onload = function () {	
		contextCountry.drawImage(CountryRUIflag3, 365 , 220);
		}	
	var CountryRUIflag4 = new Image();
	CountryRUIflag4.src = "COUNTRYPAGE/Germany.png";
	CountryRUIflag4.onload = function () {	
		contextCountry.drawImage(CountryRUIflag4, 365 , 120);
		}	
	//Bottom part
	var CountryButtonBackImage = new Image();
	CountryButtonBackImage.src = "COUNTRYPAGE/backon.png";
	CountryButtonBackImage.onload = function () {	
		contextCountry.drawImage(CountryButtonBackImage, 0 , 400);
		}
	var CountryButtonNextoffImage = new Image();
	CountryButtonNextoffImage.src = "COUNTRYPAGE/nextoff.png";
	CountryButtonNextoffImage.onload = function () {	
		contextCountry.drawImage(CountryButtonNextoffImage, 560 , 400);
		}
	var CountryPlayers = new Image();
	CountryPlayers.src = "COUNTRYPAGE/players.png";
	CountryPlayers.onload = function () {	
		contextCountry.drawImage(CountryPlayers, 120 , 87);
		}
	
	//
	// Countries page 2
	//
	var Countryback2Image = new Image();
	Countryback2Image.src = "COUNTRYPAGE/Countryback.png";
	Countryback2Image.onload = function () {	
		contextCountry2.drawImage(Countryback2Image, 0 , 0);
		}
	//Left part
	var CountryLUI1Image = new Image();
	CountryLUI1Image.src = "COUNTRYPAGE/CountryUI1.png";
	CountryLUI1Image.onload = function () {	
		contextCountry2.drawImage(CountryLUI1Image, 25 , 80);
		}
	var CountryLUI2Image = new Image();
	CountryLUI2Image.src = "COUNTRYPAGE/CountryUI2.png";
	CountryLUI2Image.onload = function () {	
		contextCountry2.drawImage(CountryLUI2Image, 35 , 105);
		}	
	var CountryLUIbuttonImage = new Image();
	CountryLUIbuttonImage.src = "COUNTRYPAGE/readyNot.png";
	CountryLUIbuttonImage.onload = function () {	
		contextCountry2.drawImage(CountryLUIbuttonImage, 85 , 315);
		}
	var Country2LUIscrollmage = new Image();
	Country2LUIscrollmage.src = "COUNTRYPAGE/scroll1.png";
	Country2LUIscrollmage.onload = function () {	
		contextCountry2.drawImage(Country2LUIscrollmage, 292 , 125);
		}
	//Left part flags
	var Country2LUIflag1 = new Image();
	Country2LUIflag1.src = "COUNTRYPAGE/Italy.png";
	Country2LUIflag1.onload = function () {	
		contextCountry2.drawImage(Country2LUIflag1, 190 , 120);
		}
	var Country2LUIflag2 = new Image();
	Country2LUIflag2.src = "COUNTRYPAGE/Japan.png";
	Country2LUIflag2.onload = function () {	
		contextCountry2.drawImage(Country2LUIflag2, 185 , 220);
		}
	var Country2LUIflag3 = new Image();
	Country2LUIflag3.src = "COUNTRYPAGE/Pakistan.png";
	Country2LUIflag3.onload = function () {	
		contextCountry2.drawImage(Country2LUIflag3, 65 , 220);
		}	
	var Country2LUIflag4 = new Image();
	Country2LUIflag4.src = "COUNTRYPAGE/Pirate.png";
	Country2LUIflag4.onload = function () {	
		contextCountry2.drawImage(Country2LUIflag4, 65 , 120);
		}
	//Right part
	var CountryRUI1Image = new Image();
	CountryRUI1Image.src = "COUNTRYPAGE/CountryUI1.png";
	CountryRUI1Image.onload = function () {	
		contextCountry2.drawImage(CountryRUI1Image, 330 , 80);
		}	
	var CountryRUI2Image = new Image();
	CountryRUI2Image.src = "COUNTRYPAGE/CountryUI2.png";
	CountryRUI2Image.onload = function () {	
		contextCountry2.drawImage(CountryRUI2Image, 340 , 105);
		}	
	var CountryRUIbuttonImage = new Image();
	CountryRUIbuttonImage.src = "COUNTRYPAGE/readyNot.png";
	CountryRUIbuttonImage.onload = function () {	
		contextCountry2.drawImage(CountryRUIbuttonImage, 390 , 315);
		}
	var Country2RUIscrollmage = new Image();
	Country2RUIscrollmage.src = "COUNTRYPAGE/scroll1.png";
	Country2RUIscrollmage.onload = function () {	
		contextCountry2.drawImage(Country2RUIscrollmage, 597 , 125);
		}
	//Right part flags
	var Country2RUIflag1 = new Image();
	Country2RUIflag1.src = "COUNTRYPAGE/Russia.png";
	Country2RUIflag1.onload = function () {	
		contextCountry2.drawImage(Country2RUIflag1, 490 , 120);
		}
	var Country2RUIflag2 = new Image();
	Country2RUIflag2.src = "COUNTRYPAGE/SaudiArabia.png";
	Country2RUIflag2.onload = function () {	
		contextCountry2.drawImage(Country2RUIflag2, 485 , 220);
		}
	var Country2RUIflag3 = new Image();
	Country2RUIflag3.src = "COUNTRYPAGE/Spain.png";
	Country2RUIflag3.onload = function () {	
		contextCountry2.drawImage(Country2RUIflag3, 365 , 220);
		}	
	var Country4RUIflag4 = new Image();
	Country4RUIflag4.src = "COUNTRYPAGE/Poland.png";
	Country4RUIflag4.onload = function () {	
		contextCountry2.drawImage(Country4RUIflag4, 365 , 120);
		}	
	//Bottom part
	var CountryButtonBackImage = new Image();
	CountryButtonBackImage.src = "COUNTRYPAGE/backon.png";
	CountryButtonBackImage.onload = function () {	
		contextCountry2.drawImage(CountryButtonBackImage, 0 , 400);
		}
	var CountryButtonNextoffImage = new Image();
	CountryButtonNextoffImage.src = "COUNTRYPAGE/nextoff.png";
	CountryButtonNextoffImage.onload = function () {	
		contextCountry2.drawImage(CountryButtonNextoffImage, 560 , 400);
		}
	var CountryPlayers = new Image();
	CountryPlayers.src = "COUNTRYPAGE/players.png";
	CountryPlayers.onload = function () {	
		contextCountry2.drawImage(CountryPlayers, 120 , 87);
		}
	
	//
	// Countries page 3
	//
	var Countryback3Image = new Image();
	Countryback3Image.src = "COUNTRYPAGE/Countryback.png";
	Countryback3Image.onload = function () {	
		contextCountry3.drawImage(Countryback3Image, 0 , 0);
		}
	//Left part
	var CountryLUI1Image = new Image();
	CountryLUI1Image.src = "COUNTRYPAGE/CountryUI1.png";
	CountryLUI1Image.onload = function () {	
		contextCountry3.drawImage(CountryLUI1Image, 25 , 80);
		}
	var CountryLUI2Image = new Image();
	CountryLUI2Image.src = "COUNTRYPAGE/CountryUI2.png";
	CountryLUI2Image.onload = function () {	
		contextCountry3.drawImage(CountryLUI2Image, 35 , 105);
		}	
	var CountryLUIreadyYesImage = new Image();
	CountryLUIreadyYesImage.src = "COUNTRYPAGE/readyYes.png";
	CountryLUIreadyYesImage.onload = function () {	
		contextCountry3.drawImage(CountryLUIreadyYesImage, 85 , 315);
		}
	var Country3LUIscrollmage = new Image();
	Country3LUIscrollmage.src = "COUNTRYPAGE/scroll2.png";
	Country3LUIscrollmage.onload = function () {	
		contextCountry3.drawImage(Country3LUIscrollmage, 292 , 125);
		}
	//Left part flags
	var Country3LUIflag1 = new Image();
	Country3LUIflag1.src = "COUNTRYPAGE/France0.png"; //labeled as France0.png because some sort of memory problem after loading image before resize
	Country3LUIflag1.onload = function () {	
		contextCountry3.drawImage(Country3LUIflag1, 190 , 120);
		}
	var Country3LUIflag2 = new Image();
	Country3LUIflag2.src = "COUNTRYPAGE/Sweden.png";
	Country3LUIflag2.onload = function () {	
		contextCountry3.drawImage(Country3LUIflag2, 185 , 220);
		}
	var Country3LUIflag3 = new Image();
	Country3LUIflag3.src = "COUNTRYPAGE/Switzerland.png";
	Country3LUIflag3.onload = function () {	
		contextCountry3.drawImage(Country3LUIflag3, 65 , 220);
		}
	var Country3LUIflag4 = new Image();
	Country3LUIflag4.src = "COUNTRYPAGE/Finland.png";
	Country3LUIflag4.onload = function () {	
		contextCountry3.drawImage(Country3LUIflag4, 65 , 120);
		}
	var CountryFlagSelectLUI = new Image();
	CountryFlagSelectLUI.src = "COUNTRYPAGE/select.png";
	CountryFlagSelectLUI.onload = function () {	
		contextCountry3.drawImage(CountryFlagSelectLUI, 45 , 205);
		}
	//Right part
	var CountryRUI1Image = new Image();
	CountryRUI1Image.src = "COUNTRYPAGE/CountryUI1.png";
	CountryRUI1Image.onload = function () {	
		contextCountry3.drawImage(CountryRUI1Image, 330 , 80);
		}	
	var CountryRUI2Image = new Image();
	CountryRUI2Image.src = "COUNTRYPAGE/CountryUI2.png";
	CountryRUI2Image.onload = function () {	
		contextCountry3.drawImage(CountryRUI2Image, 340 , 105);
		}	
	var CountryRUIreadyYesImage = new Image();
	CountryRUIreadyYesImage.src = "COUNTRYPAGE/readyYes.png";
	CountryRUIreadyYesImage.onload = function () {	
		contextCountry3.drawImage(CountryRUIreadyYesImage, 390 , 315);
		}
	var Country3RUIscrollmage = new Image();
	Country3RUIscrollmage.src = "COUNTRYPAGE/scroll2.png";
	Country3RUIscrollmage.onload = function () {	
		contextCountry3.drawImage(Country3RUIscrollmage, 597 , 125);
		}
	//Right part flags
	var Country3RUIflag1 = new Image();
	Country3RUIflag1.src = "COUNTRYPAGE/Ukraine.png";
	Country3RUIflag1.onload = function () {	
		contextCountry3.drawImage(Country3RUIflag1, 490 , 120);
		}
	var Country3RUIflag2 = new Image();
	Country3RUIflag2.src = "COUNTRYPAGE/Norway.png";
	Country3RUIflag2.onload = function () {	
		contextCountry3.drawImage(Country3RUIflag2, 485 , 220);
		}
	var Country3RUIflag3 = new Image();
	Country3RUIflag3.src = "COUNTRYPAGE/Turkey.png";
	Country3RUIflag3.onload = function () {	
		contextCountry3.drawImage(Country3RUIflag3, 365 , 220);
		}	
	var Country3RUIflag4 = new Image();
	Country3RUIflag4.src = "COUNTRYPAGE/USA.png";
	Country3RUIflag4.onload = function () {	
		contextCountry3.drawImage(Country3RUIflag4, 365 , 120);
		}
	var CountryFlagSelectRUI = new Image();
	CountryFlagSelectRUI.src = "COUNTRYPAGE/select2.png";
	CountryFlagSelectRUI.onload = function () {	
		contextCountry3.drawImage(CountryFlagSelectRUI, 345 , 108);
		}
	//Bottom part
	var CountryButtonBackImage = new Image();
	CountryButtonBackImage.src = "COUNTRYPAGE/backon.png";
	CountryButtonBackImage.onload = function () {	
		contextCountry3.drawImage(CountryButtonBackImage, 0 , 400);
		}
	var CountryButtonNextImage = new Image();
	CountryButtonNextImage.src = "COUNTRYPAGE/nexton.png";
	CountryButtonNextImage.onload = function () {	
		contextCountry3.drawImage(CountryButtonNextImage, 560 , 400);
		}
	var CountryPlayers = new Image();
	CountryPlayers.src = "COUNTRYPAGE/players.png";
	CountryPlayers.onload = function () {	
		contextCountry3.drawImage(CountryPlayers, 120 , 87);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Terrain choices page 1
	var TerrainbackImage = new Image();
	TerrainbackImage.src = "TERRAINPAGE/Terrainback.png";
	TerrainbackImage.onload = function () {	
		contextTerrain.drawImage(TerrainbackImage, 0 , 0);
		}
	var TerrainUI1Image = new Image();
	TerrainUI1Image.src = "TERRAINPAGE/UI1.png";
	TerrainUI1Image.onload = function () {	
		contextTerrain.drawImage(TerrainUI1Image, 0 , 0);
		}
	var TerrainUI2Image = new Image();
	TerrainUI2Image.src = "TERRAINPAGE/UI2.png";
	TerrainUI2Image.onload = function () {	
		contextTerrain.drawImage(TerrainUI2Image, 0 , 0);
		}
	var TerrainPictures = new Image();
	TerrainPictures.src = "TERRAINPAGE/terrainpictures3.png";
	TerrainPictures.onload = function () {	
		contextTerrain.drawImage(TerrainPictures, 140 , 90);
		}
	var TerrainStartImage = new Image();
	TerrainStartImage.src = "TERRAINPAGE/start.png";
	TerrainStartImage.onload = function () {	
		contextTerrain.drawImage(TerrainStartImage, 545 , 395);
		}
	var TerrainButtonBackOn = new Image();
	TerrainButtonBackOn.src = "TERRAINPAGE/backon.png";
	TerrainButtonBackOn.onload = function () {	
		contextTerrain.drawImage(TerrainButtonBackOn, 0 , 400);
		}
	var TerrainReadyYes = new Image();
	TerrainReadyYes.src = "TERRAINPAGE/readyyes.png";
	TerrainReadyYes.onload = function () {	
		contextTerrain.drawImage(TerrainReadyYes, 250 , 420);
		}
	var TerrainInstruction = new Image();
	TerrainInstruction.src = "TERRAINPAGE/instruction.png";
	TerrainInstruction.onload = function () {	
		contextTerrain.drawImage(TerrainInstruction, 580 , 5);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Instructions Page from menu
	var Instructionsback = new Image();
	Instructionsback.src = "INSTRUCTIONS/Instructionsback.png";
	Instructionsback.onload = function () {	
		contextMenuInstructions.drawImage(Instructionsback, 0 , 0);
		}
	var InstructionsUI1Image = new Image();
	InstructionsUI1Image.src = "INSTRUCTIONS/UI1.png";
	InstructionsUI1Image.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsUI1Image, 0 , 0);
		}
	var InstructionsUI2Image = new Image();
	InstructionsUI2Image.src = "INSTRUCTIONS/UI2.png";
	InstructionsUI2Image.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsUI2Image, 0 , 0);
		}
	var InstructionsButtonBackOnImage = new Image();
	InstructionsButtonBackOnImage.src = "INSTRUCTIONS/backon.png";
	InstructionsButtonBackOnImage.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsButtonBackOnImage, 0 , 400);
		}
	var InstructionsStartImage = new Image();
	InstructionsStartImage.src = "INSTRUCTIONS/start.png";
	InstructionsStartImage.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsStartImage, 545 , 395);
		}
	//mouse and buttons
	var InstructionsMouse = new Image();
	InstructionsMouse.src = "INSTRUCTIONS/mouse1.png";
	InstructionsMouse.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsMouse, 400 , 300);
		}
	var InstructionsRight = new Image();
	InstructionsRight.src = "INSTRUCTIONS/right.png";
	InstructionsRight.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsRight, 450 , 70);
		}
	var InstructionsLeft = new Image();
	InstructionsLeft.src = "INSTRUCTIONS/left.png";
	InstructionsLeft.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsLeft, 380 , 70);
		}
	var InstructionsUp = new Image();
	InstructionsUp.src = "INSTRUCTIONS/up.png";
	InstructionsUp.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsUp, 380 , 150);
		}
	var InstructionsDown = new Image();
	InstructionsDown.src = "INSTRUCTIONS/down.png";
	InstructionsDown.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsDown, 450 , 150);
		}
	var InstructionsSpace = new Image();
	InstructionsSpace.src = "INSTRUCTIONS/space0.png";
	InstructionsSpace.onload = function () {	
		contextMenuInstructions.drawImage(InstructionsSpace, 360 , 230);
		}
	var Instr = new Image();
	Instr.src = "INSTRUCTIONS/instr1.png";
	Instr.onload = function () {	
		contextMenuInstructions.drawImage(Instr, 130 , 100);
		}
	//Example of all the different Terrains
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------

	//Lake 
	var LTbackImage = new Image();
	LTbackImage.src = "INGAME/LakeTerrain/LTback.png";
	LTbackImage.onload = function () {	
		contextLT.drawImage(LTbackImage, 0 , 0);
		}
	var LTterrImage = new Image();
	LTterrImage.src = "INGAME/LakeTerrain/LTterr.png";
	LTterrImage.onload = function () {	
		contextLT.drawImage(LTterrImage,0 , 0);
		}
	var LTobjectImage = new Image();
	LTobjectImage.src = "INGAME/LakeTerrain/LTobj.png";
	LTobjectImage.onload = function () {	
		contextLT.drawImage(LTobjectImage,0 , 0);
		}
	var LTP2Image = new Image();
	LTP2Image.src = "INGAME/LakeTerrain/P2tankLeft.png";
	LTP2Image.onload = function () {	
		contextLT.drawImage(LTP2Image,550 , 340);
		}
	var LTP1Image = new Image();
	LTP1Image.src = "INGAME/LakeTerrain/P1tankRight.png";
	LTP1Image.onload = function () {	
		contextLT.drawImage(LTP1Image,30 , 350);
		}
	var LTTools = new Image();
	LTTools.src = "INGAME/LakeTerrain/toolbar.png";
	LTTools.onload = function () {	
		contextLT.drawImage(LTTools,0 , 0);
		}
	var LTToolsTanks = new Image();
	LTToolsTanks.src = "INGAME/LakeTerrain/toolstank.png";
	LTToolsTanks.onload = function () {	
		contextLT.drawImage(LTToolsTanks,0 , -30);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------	
	//Open Space
	var OSbackImage = new Image();
	OSbackImage.src = "INGAME/OpenSpace/OSback.png";
	OSbackImage.onload = function () {	
		contextOS.drawImage(OSbackImage,0 , 0);
		}
	var OSdanexImage = new Image();
	OSdanexImage.src = "INGAME/Openspace/OSdanex.png";
	OSdanexImage.onload = function () {	
		contextOS.drawImage(OSdanexImage,0 , 0);
		}
	var OSobjectImage = new Image();
	OSobjectImage.src = "INGAME/Openspace/OSobj.png";
	OSobjectImage.onload = function () {	
		contextOS.drawImage(OSobjectImage,0 , 0);
		}
	var OSterrImage = new Image();
	OSterrImage.src = "INGAME/Openspace/OSterr.png";
	OSterrImage.onload = function () {	
		contextOS.drawImage(OSterrImage,0 , 0);
		}
	var OSp2Image = new Image();
	OSp2Image.src = "INGAME/Openspace/P2os.png";
	OSp2Image.onload = function () {	
		contextOS.drawImage(OSp2Image, 550 , 358);
		}
	var OSP1Image = new Image();
	OSP1Image.src = "INGAME/Openspace/P1os.png";
	OSP1Image.onload = function () {	
		contextOS.drawImage(OSP1Image,30 , 360);
		}
	var OSTools = new Image();
	OSTools.src = "INGAME/Openspace/toolbar.png";
	OSTools.onload = function () {	
		contextOS.drawImage(OSTools,0 , 0);
		}
	var OSToolsTank = new Image();
	OSToolsTank.src = "INGAME/Openspace/toolstank.png";
	OSToolsTank.onload = function () {	
		contextOS.drawImage(OSToolsTank,0 , -20);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Uni sign	
	var UnibackImage = new Image();
	UnibackImage.src = "INGAME/Universita/Uniback.png";
	UnibackImage.onload = function () {	
		contextUni.drawImage(UnibackImage,0 , 0);
		}
	var UniterrImage = new Image();
	UniterrImage.src = "INGAME/Universita/Uniterr.png";
	UniterrImage.onload = function () {	
		contextUni.drawImage(UniterrImage,0 , 0);
		}
	var UniobjImage = new Image();
	UniobjImage.src = "INGAME/Universita/Uniobj.png";
	UniobjImage.onload = function () {	
		contextUni.drawImage(UniobjImage,0 , 0);
		}
	var UniP2Image = new Image();
	UniP2Image.src = "INGAME/Universita/P2uni.png";
	UniP2Image.onload = function () {	
		contextUni.drawImage(UniP2Image,550 , 318);
		}
	var UniP1Image = new Image();
	UniP1Image.src = "INGAME/Universita/P1uni.png";
	UniP1Image.onload = function () {	
		contextUni.drawImage(UniP1Image,30 , 318);
		}
	var UniTools = new Image();
	UniTools.src = "INGAME/Universita/toolbar.png";
	UniTools.onload = function () {	
		contextUni.drawImage(UniTools,0 , 0);
		}
	var UniToolsTanks = new Image();
	UniToolsTanks.src = "INGAME/Universita/toolstank.png";
	UniToolsTanks.onload = function () {	
		contextUni.drawImage(UniToolsTanks,0 , -60);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Speedys Pizza	
	var SpeedybackImage = new Image();
	SpeedybackImage.src = "INGAME/SpeedyPizza/Speedyback.png";
	SpeedybackImage.onload = function () {	
		contextSpeedy.drawImage(SpeedybackImage,0 , 0);
		}
	var SpeedyterrImage = new Image();
	SpeedyterrImage.src = "INGAME/SpeedyPizza/Speedyterr.png";
	SpeedyterrImage.onload = function () {	
		contextSpeedy.drawImage(SpeedyterrImage,0 , 0);
		}
	var SpeedyobjImage = new Image();
	SpeedyobjImage.src = "INGAME/SpeedyPizza/Speedyobj.png";
	SpeedyobjImage.onload = function () {	
		contextSpeedy.drawImage(SpeedyobjImage,0 , 0);
		}
	var SpeedyP2Image = new Image();
	SpeedyP2Image.src = "INGAME/SpeedyPizza/P2speedy.png";
	SpeedyP2Image.onload = function () {	
		contextSpeedy.drawImage(SpeedyP2Image,550 , 300);
		}
	var SpeedyP1Image = new Image();
	SpeedyP1Image.src = "INGAME/SpeedyPizza/P1speedy.png";
	SpeedyP1Image.onload = function () {	
		contextSpeedy.drawImage(SpeedyP1Image,30 , 300);
		}
	var SpeedyTools = new Image();
	SpeedyTools.src = "INGAME/SpeedyPizza/toolbar.png";
	SpeedyTools.onload = function () {	
		contextSpeedy.drawImage(SpeedyTools,0 , 0);
		}	
	var SpeedyToolsTank = new Image();
	SpeedyToolsTank.src = "INGAME/SpeedyPizza/toolstank.png";
	SpeedyToolsTank.onload = function () {	
		contextSpeedy.drawImage(SpeedyToolsTank,0 , -80);
		}	

	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Choose one of tne terrains to illustrate all the different aspects of gameplay
	//Ingame activity 1 PLAYER1
	var Activitybg = new Image();
	Activitybg.src = "ACTIVITY/activityback1.png"
	Activitybg.onload = function () {
		contextActivity1.drawImage(Activitybg, 0, 0);
		}
	//Ingame activity 2 PLAYER1
	var Activitybg2 = new Image();
	Activitybg2.src = "ACTIVITY/activityback2.png"
	Activitybg2.onload = function () {
		contextActivity2.drawImage(Activitybg2, 0, 0);
		}
	var ActivityProjectile = new Image();
	ActivityProjectile.src = "ACTIVITY/aimandweapon.png"
	ActivityProjectile.onload = function () {
		contextActivity2.drawImage(ActivityProjectile, 0, 0);
		}
	//Ingame activity 3 PLAYER1
	var Activitybg3 = new Image();
	Activitybg3.src = "ACTIVITY/activityback3.png"
	Activitybg3.onload = function () {
		contextActivity3.drawImage(Activitybg3, 0, 0);
		}
	var ActivityExplosion = new Image();
	ActivityExplosion.src = "ACTIVITY/explosion.png"
	ActivityExplosion.onload = function () {
		contextActivity3.drawImage(ActivityExplosion, 400, 340);
		}
	//Ingame activity 4 PLAYER2
	var Activitybg4 = new Image();
	Activitybg4.src = "ACTIVITY/activityback4.png"
	Activitybg4.onload = function () {
		contextActivity4.drawImage(Activitybg4, 0, 0);
		}
	//Ingame activity 5 PLAYER2
	var Activitybg5 = new Image();
	Activitybg5.src = "ACTIVITY/activityback5.png"
	Activitybg5.onload = function () {
		contextActivity5.drawImage(Activitybg5, 0, 0);
		}
	var ActivityProjectile2 = new Image();
	ActivityProjectile2.src = "ACTIVITY/aimandweapon2.png"
	ActivityProjectile2.onload = function () {
		contextActivity5.drawImage(ActivityProjectile2, 0, 0);
		}
	//Ingame activity 6 PLAYER2
	var Activitybg6 = new Image();
	Activitybg6.src = "ACTIVITY/activityback6.png"
	Activitybg6.onload = function () {
		contextActivity6.drawImage(Activitybg6, 0, 0);
		}
	var ActivityExplosion2 = new Image();
	ActivityExplosion2.src = "ACTIVITY/explosion.png"
	ActivityExplosion2.onload = function () {
		contextActivity6.drawImage(ActivityExplosion2, 40, 360);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------
	//Pause menu
	var PauseBack = new Image();
	PauseBack.src = "MENUPAUSE/pausebg.png"
	PauseBack.onload = function () {
		contextPause.drawImage(PauseBack, 0, 0);
		}
	var PauseOpaq = new Image();
	PauseOpaq.src = "MENUPAUSE/pauseopaq.png"
	PauseOpaq.onload = function () {
		contextPause.drawImage(PauseOpaq, 0, 0);
		}
	var PauseButtons = new Image();
	PauseButtons.src = "MENUPAUSE/buttonsall.png"
	PauseButtons.onload = function () {
		contextPause.drawImage(PauseButtons, 0, 0);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------	
	// Victory screen
	var VictoryBack = new Image();
	VictoryBack.src = "VICTORY/victorybg.png"
	VictoryBack.onload = function () {
		contextVictory1.drawImage(VictoryBack, 0, 0);
		}
	var VictoryFireworks1 = new Image();
	VictoryFireworks1.src = "VICTORY/fireworks1.png"
	VictoryFireworks1.onload = function () {
		contextVictory1.drawImage(VictoryFireworks1, 0, 50);
		}
	var VictoryFireworks2 = new Image();
	VictoryFireworks2.src = "VICTORY/fireworks2.png"
	VictoryFireworks2.onload = function () {
		contextVictory1.drawImage(VictoryFireworks2, 150, 50);
		}
	var VictoryFireworks3 = new Image();
	VictoryFireworks3.src = "VICTORY/fireworks3.png"
	VictoryFireworks3.onload = function () {
		contextVictory1.drawImage(VictoryFireworks3, 250, 80);
		}
	var VictoryFireworks4 = new Image();
	VictoryFireworks4.src = "VICTORY/fireworks4.png"
	VictoryFireworks4.onload = function () {
		contextVictory1.drawImage(VictoryFireworks4, 350, 50);
		}
	var VictoryMessage = new Image();
	VictoryMessage.src = "VICTORY/victorymassage.png"
	VictoryMessage.onload = function () {
		contextVictory1.drawImage(VictoryMessage, 0, 0);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------	
	//New game & restart screen
	var EndBack = new Image();
	EndBack.src = "END/endbg.png"
	EndBack.onload = function () {
		contextEnd.drawImage(EndBack, 0, 0);
		}
	var EndOpaq = new Image();
	EndOpaq.src = "END/endopaq.png"
	EndOpaq.onload = function () {
		contextEnd.drawImage(EndOpaq, 0, 0);
		}
	var EndButtons = new Image();
	EndButtons.src = "END/buttonsall.png"
	EndButtons.onload = function () {
		contextEnd.drawImage(EndButtons, 0, 0);
		}
	//--------------------------------------------------------------------------
	//--------------------------------------------------------------------------	
	
	
	
	//box
	//context.strokeStyle = "#000000";
	//context.strokeRect(5, 5, 490, 290);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;"> 

<p><strong>Title / Loading Screen</strong></p>
<canvas id="Title" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Country select screen</strong></p>
<canvas id="Country" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Country select screen</strong></p>
<canvas id="Country2" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Country select screen</strong></p>
<canvas id="Country3" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Terrain select page</strong></p>
<canvas id="Terrain" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Instruction page</strong></p>
<canvas id="MenuInstructions" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Game activity (player1)</strong></p>
<canvas id="Activity1" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Game activity (player1)</strong></p>
<canvas id="Activity2" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Game activity (player1)</strong></P>
<canvas id="Activity3" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Game activity (player2)</strong></P>
<canvas id="Activity4" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Game activity (player2)</strong></P>
<canvas id="Activity5" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Game activity (player2)</strong></P>
<canvas id="Activity6" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Pause menu</strong></P>
<canvas id="Pause" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Victory screen</strong></p>
<canvas id="Victory1" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>End game menu</strong></p>
<canvas id="End" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Lugano lake terrain</strong></p>
<canvas id="Lake" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Open space terrain</strong></p>
<canvas id="OS" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>University terrain</strong></p>
<canvas id="Uni" width="640"
height="480" style="border: 1px
solid black">
</canvas>

<p><strong>Speedy pizza terrain</strong></p>
<canvas id="Speedy" width="640"
height="480" style="border: 1px
solid black">
</canvas>


</div> 

</body> 
</html>